<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/ItemPage">    
    <head>        
        <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
        <link rel="publisher" href="http://google.com/+RentpadPhi" />   
        <c:if test="${model.leaseTermType == 1}"><link rel="canonical" href="${model.props.appPath}/for-rent/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}"/></c:if>
        <c:if test="${model.leaseTermType == 2}"><link rel="canonical" href="${model.props.appPath}/for-rent/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}"/></c:if>
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <c:if test="${model.listing.numBedrooms == 0}"><title>Studio ${model.listing.propertyType.title} For Rent in ${model.listing.city} at ${model.listing.structure}</title></c:if>
        <c:if test="${model.listing.numBedrooms > 0}"><title>${model.listing.numBedrooms} Bedroom ${model.listing.propertyType.title} For Rent in ${model.listing.city} at ${model.listing.structure}</title></c:if> 
        <meta name="description" content="${model.listing.displayShortDescription}" />        
        <meta name="keywords" content="${model.listing.structure} for rent, ${model.listing.structure} ${model.listing.city} for rent, ${model.listing.structure} ${model.propertyType.title} for rent, ${model.listing.propertyType.title} for rent in ${model.listing.city}, ${model.listing.city} ${model.listing.propertyType.title} for rent, ${model.listing.propertyType.title} for rent in ${model.listing.structure}, ${model.listing.structure} ${model.listing.propertyType.title} for rent"/>
        
        <meta property="og:type" content="website"  />      
        <meta property="og:site_name" content="Rentpad.com.ph"/>  
        <c:if test="${model.leaseTermType == 0}"><meta property="og:url" content="${model.props.appPath}/for-rent/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}"  /></c:if>
        <c:if test="${model.leaseTermType == 1}"><meta property="og:url" content="${model.props.appPath}/long-term-rentals/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}"  /></c:if>
        <c:if test="${model.leaseTermType == 2}"><meta property="og:url" content="${model.props.appPath}/short-term-rentals/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}"  /></c:if>        
        <c:if test="${model.listing.numBedrooms == 0}"><meta property="og:title" content="Studio ${model.listing.propertyType.title} For Rent in ${model.listing.city} at ${model.listing.structure}"  /></c:if>
        <c:if test="${model.listing.numBedrooms > 0}"><meta property="og:title" content="${model.listing.numBedrooms} Bedroom ${model.listing.propertyType.title} For Rent in ${model.listing.city} at ${model.listing.structure}"  /></c:if>            
        <meta property="og:description" content="${model.listing.displayShortDescription}" />
        <meta property="og:image" content="${model.props.rootPath}/uploads/img/001-${model.listing.primaryPhoto.filename}"  /> 
                        
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:site" value="@rentpadph"/>
        <meta name="twitter:url" content="http://rentpad.com.ph"/>
        <c:if test="${model.listing.numBedrooms == 0}"><meta name="twitter:title" content="Studio ${model.listing.propertyType.title} For Rent in ${model.listing.city} at ${model.listing.structure}"  /></c:if>
        <c:if test="${model.listing.numBedrooms > 0}"><meta name="twitter:title" content="${model.listing.numBedrooms} Bedroom ${model.listing.propertyType.title} For Rent in ${model.listing.city} at ${model.listing.structure}"  /></c:if>           
        <meta name="twitter:description" content="${model.listing.displayShortDescription}"/>
        <meta name="twitter:image" content="${model.props.appPath}/img/rentpad-logo-1.png"/>
        
        <meta itemprop="name" content="${model.listing.title}"/>
        <meta itemprop="description" content="${model.listing.displayShortDescription}"/>
        <meta itemprop="keywords" content="${model.listing.structure} for rent, ${model.listing.structure} ${model.listing.city} for rent, ${model.listing.structure} ${model.propertyType.title} for rent, ${model.listing.propertyType.title} for rent in ${model.listing.city}, ${model.listing.city} ${model.listing.propertyType.title} for rent, ${model.listing.propertyType.title} for rent in ${model.listing.structure}, ${model.listing.structure} ${model.listing.propertyType.title} for rent"/>
        <meta itemprop="image" content="${model.props.rootPath}/uploads/img/001-${model.listing.primaryPhoto.filename}"/>
                
        <link rel="stylesheet" type="text/css" href="${model.props.appPath}/css/jquery/lightness-jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="${model.props.appPath}/css/gallery/jquery.galleryview-3.0-dev.css" />                
        
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-ui.js"></script>        
        <script type="text/javascript" src="${model.props.appPath}/js/gallery/jquery.timers-1.2.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/gallery/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/gallery/jquery.galleryview-3.0-dev.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/cookie/jquery.cookie.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/block/jquery.blockUI.js"></script>

        <%@ include file="include/listingMaps.jsp" %>

        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
            
            @font-face
            {
            font-family: avant;
            src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            -webkit-overflow-scrolling: touch; 
            
            #galleria{height:467px}
            
            .view-tile-float-wrap {
                /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
                width:1070px;
                border:0px solid;
                /* causes .float-wrap's height to match its child divs */
                overflow:auto;
            }
            .view-tile-left-floater {
                width:330px;
                border:0px solid;    
                float:left;
                margin-left: 20px;
                margin-top: 40px;
                background-color:#ffffff;
            }
            .view-tile-outer {
                overflow-x: hidden;   
            }

            .view-list-float-wrap {
                /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
                width:1000px;
                border:0px solid;
                /* causes .float-wrap's height to match its child divs */
                overflow: hidden;
            }
            .view-list-left-floater {
                width:210px;
                border:0px solid;    
                float:left;
                margin-left: 20px;
                margin-top: 20px;
                background-color:#F5F2F3;
            }
            .view-list-outer {
                overflow-x: hidden;   
            }
            .listing-photo-holder{
                border: 0px solid black;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;                  
            }
            .search-panel-holder{
                border: 0px solid black;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;                  
            }            
            .select-panel-holder{
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;                  
            }
        </style>

        <script type="text/javascript">
            $(function() {
                initGalleryView();
                initSubmitForm();   
                $("#table-listing-details tr:odd").css("background-color", "white");
                
                $( "#dialog" ).dialog({
                    autoOpen: false,
                    width: "500px"
                });
                $( "#opener" ).click(function() {
                    $( "#dialog" ).dialog( "open" );
                });
                
                $( "#dialog-email" ).dialog({
                    autoOpen: false,
                    width: "600px",
                    modal: true
                });
                        
                showContactDetails();
                showEmailDialog();
                initialize();
                
                
                //searchGeoListings(${model.listing.lat}, ${model.listing.lng}, "${model.listing.city}", 5, 1);
            });            
            
            function showContactDetails() {                
                setTimeout(function(){      
                    var at = "${model.at}";   
                    var ownerID = "${model.ownerID}";
                    $.ajax({
                            type: 'POST',
                            url: "${model.props.appPath}/ws/inquiry.htm",
                            data: {
                                at: at,
                                ownerID: ownerID,       
                                a: 3000
                            },
                            timeout: 200000,
                            success: function(data) {
                                if (data.model.success) {
                                    var firstName = data.model.firstName;
                                    var lastName = data.model.lastName;
                                    var email = data.model.email;
                                    var mobile = data.model.mobile;
                                    var landline = data.model.landline;
                                    
                                    if (firstName) {
                                        $("#contact-name").html(firstName + " " + lastName);
                                    }
                                    if (email) {
                                        $("#contact-email").html(email);
                                    }
                                    if (mobile) {
                                        $("#contact-mobile").html(mobile);
                                    }
                                    if (landline) {
                                        $("#contact-landline").html(landline);  
                                    }                                 
                                }                                  
                            }
                        });         
                }
                ,2000);                
            }
            
            function showEmailDialog() {      
                                           
                                
                setTimeout(function(){                    
                    var ctr = $.cookie("repad1-email-ctr");
                    if (!ctr) {
                        ctr = 1;
                        $.cookie('repad1-email-ctr', ctr, { expires: 1, path: '/' });
                    }
                    else {
                        ctr++;
                        $.cookie('repad1-email-ctr', ctr, { expires: 1, path: '/' });
                        if (ctr%3 == 0) {
                            var email = $.cookie("repad1-email");
                            if (!email) {   
                                $.cookie('repad1-email', '1', { expires: 1, path: '/' });                            
                            }
                        }    
                    }               
                }
                ,5000);                
            }
            
            function submitEmailDialogForm() {
                var name = $("#text-lead-name").val();
                var email = $("#text-lead-email").val();
                var type = $("#text-lead-type").val();
                var range = $("#text-lead-range").val();
                var beds = $("#text-lead-beds").val();
                var city = $("#text-lead-city").val();
                var description = "";
                                
                try {
                    if (!name || !email) {
                        alert("Your name and email are required.");                        
                    } 
                    else {                        
                        description += city + " " + type + " " + range + " " + beds;
                        $.ajax({
                            type: 'POST',
                            url: "${model.props.appPath}/ws/lead.htm",
                            data: {
                                name: name,
                                email: email,
                                description: description,
                                a: 3
                            },
                            timeout: 200000,
                            success: function(data) {
                                if (data.model.success) {
                                    alert("Got it! We have recorded your details and hopefully we can help you find a place. Have a great day!");
                                    $("#text-lead-name").val("");
                                    $("#text-lead-email").val("");
                                    $("#text-lead-type").val("");
                                    $("#text-lead-range").val("");
                                    $("#text-lead-city").val("");
                                    
                                    $( "#dialog-email" ).dialog( "close" );
                                }                                  
                            }
                        });                        
                    }
                }
                catch (e) {
                    alert(e);
                }
            }     
            
            function initGalleryView() {                
                try {
                    //CX: init gallery
                    $('#myGallery').galleryView({
                        panel_width: 747,
                        panel_height: 380,
                        frame_width: 100,
                        frame_height: 70
                    });
                } catch (e) {
                    //alert(e)
                }
            }
            function toggleContentMapView() {
                $("#content-photo").hide();
                $("#content-map").show();
                initialize();
            }
            function toggleContentPhotoView() {
                $("#content-photo").show();
                $("#content-map").hide();
            }
            function initSubmitForm() {                
                try {
                    $(function() {
                        $('.ghost').each(function(index) {// Adds the Ghost effect on textbox
                            if ($(this).val() === "" || $(this).val() === $(this).attr("title")) {
                                $(this).attr("value", $(this).attr("title")).css({"color": "#999"});
                            }
                        });
                        $('.ghost').on("focusin", function() {
                            if ($(this).val() === $(this).attr("title")) {
                                $(this).val("").css({"color": "#000000"});//Clear text and return normal color
                            }
                        }).focusout(function() {
                            if ($(this).val() === "") {//Nothing has changed
                                $(this).val($(this).attr("title")).css({"color": "#999"});//return back to ghost state
                            }
                        });
                        $("#text-tour-message").focusout();
                    });
                } catch (e) {
                    alert(e)
                }
            }
            function submitTourForm() {
                var name = $("#text-tour-name").val();
                var email = $("#text-tour-email").val();
                var phone = $("#text-tour-phone").val();
                var message = $("#text-tour-message").val();
                
                if (name == 'Name') {
                    name = '';
                }
                if (email == 'Email') {
                    email = '';
                }                
                if (phone == 'Phone') {
                    phone = '';
                }
                
                try {
                    if (!name || !email) {
                        alert("Your name and email are required to proceed with your inquiry.");                        
                    } 
                    else {
                        $.blockUI({ message: "<div style='font-family: avant, Century Gothic, Calibri, Verdana; padding: 10px;'>Sending Inquiry ...</div>" });                    
                        $("#submit-recaptcha").attr('disabled','disabled');
                        $.ajax({
                            type: 'POST',
                            url: "${model.props.appPath}/ws/inquiry.htm",
                            data: {
                                name: name,
                                email: email,
                                phone: phone,
                                message: message,
                                listingID: "${model.listing.id}",
                                a: 2000,
                                recaptcha_challenge_field: $("input#recaptcha_challenge_field").val(),
                                recaptcha_response_field: $("input#recaptcha_response_field").val()
                            },
                            timeout: 200000,
                            success: function(data) {
                                $.unblockUI();
                                if (data.model.success) {
                                    $( "#dialog" ).dialog( "close" );        
                                    $( "#dialog-email" ).dialog( "open" ); 
                                    //alert("Success! Your inquiry was sent to the listing owner. Have a great day!");
                                    
                                    $("#text-tour-name").val("");
                                    $("#text-tour-email").val("");
                                    $("#text-tour-phone").val("");
                                    $("#text-tour-message").val("");
                                    $("#text-tour-name").focusout();
                                    $("#text-tour-email").focusout();
                                    $("#text-tour-phone").focusout();
                                    $("#text-tour-message").focusout();
                                    //location.reload(true);
                                }    
                                else {
                                    alert("Oops! You did not enter the correct ReCaptcha code. Please try again.");
                                }
                                $("#submit-recaptcha").removeAttr('disabled');
                            }
                        });                        
                    }
                }
                catch (e) {
                    alert(e);
                }
            }
            
            function searchGeoListings(centerLat, centerLng, cityName, itemsPerPage, pageNumber) {
                var distanceKM = 1;
                try {
                    $.ajax({
                        type: 'POST',
                        url: "${model.props.appPath}/ws/search.htm",
                        data: {
                            a: 4,
                            leaseTermType: 1,
                            cityName: cityName,
                            itemsPerPage: itemsPerPage,
                            pageNumber: pageNumber,
                            centerLat: centerLat,
                            centerLng: centerLng,
                            distanceKM: distanceKM,
                            ham: "ham"
                        },
                        timeout : 200000,
                        success: function(data) {
                            try {                                
                                var searchResult = data.model.searchResult;                                     
                                var listings = searchResult.listings;
                                alert('CX: ' + listings);   
                                alert('CX: ' + listings.length);                                                          
                            } 
                            catch (e) {
                                alert("Search Geo Error: " + e);
                            }
                        },
                        error : function(xhr, textStatus, errorThrown) {
                        }
                    });
                } catch (e) {
                    alert(e);
                }   
            }             
        </script>  
        
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
        
        <script type="text/javascript">
            var RecaptchaOptions = {
                theme : 'clean'
            };
        </script>
        
        <link type="text/css" rel="stylesheet" href="${model.props.appPath}/js/galleria/themes/classic/galleria.classic.css">
        <script type="text/javascript" src="${model.props.appPath}/js/galleria/galleria-1.3.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/galleria/themes/classic/galleria.classic.min.js"></script>
    </head>

    <body itemprop="offers" itemscope itemtype="http://schema.org/Offer" style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: avant, Century Gothic, Verdana; padding: 0px; margin: 0px;" >

        <div style="margin-top: 0px; background-color: white;">

            <table cellpadding="0" cellspacing="0"style="width: 100%; margin-top: 0px; background-color: white; border-collapse: collapse;">
                
                <tr>
                    <td>                        
                        <%@include file="header.jsp" %>                        
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <div style="width: 100%; text-align: left; font-family: avant, Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x;">

                            <br>                

                            <div style="width: 1020px; margin-top: 10px; margin: 0 auto;">

                                <table border="0" style="width: 1020px; margin-top: 10px;">    
                                    <c:if test="${model.owner}">
                                    <tr>
                                        <td colspan="4" >  
                                            <div style="background-color: #fafafa; padding: 5px;">                                    
                                                <span style="font-size: 14px; font-style: italic; ">
                                                    Owner Options: 
                                                    &nbsp;
                                                    <a href="${model.props.appPath}/listing.htm?a=4&id=${model.listing.id}" style="color: #369;" title="Edit Info">edit info</a>
                                                    &bull;
                                                    <a href="${model.props.appPath}/listing.htm?a=1003&id=${model.listing.id}" style="color: #369;" title="Edit Photos">edit photos</a>
                                                    &bull;
                                                    <a href="#" style="color: #369;" onclick="if(confirm('Are you sure you want to delete this?')) { window.location='listing.htm?a=5&id=${model.listing.id}'; }" title="Delete Listing">delete property</a>

                                                    <!--
                                                    <p>
                                                        Listing Status: &nbsp;
                                                        <c:if test="${model.listing.posted}">
                                                            <span style="color: darkgreen; font-weight: normal;">Listing is posted until <fmt:formatDate value="${model.listing.expiryDate}" pattern="MMMM dd, yyyy" /></span>
                                                        </c:if>
                                                        <c:if test="${!model.listing.posted}">
                                                            <span style="color: red; font-weight: normal;">Listing is not Posted (will not appear on the search)</span>                              
                                                        </c:if>
                                                    </p>
                                                        -->
                                                    <p>
                                                    Tip: You are seeing this because you are the listing owner.  Navigate to <a href="${model.props.appPath}/account.htm#manager" style="color: #369">Listings Manager</a> for more more options.
                                                    </p>
                                                </span>
                                                <hr>
                                            </div>
                                            <br>
                                        </td>
                                    </tr>
                                    </c:if>    

                                    <tr>
                                        <td itemprop="itemOffered" itemscope itemtype="http://schema.org/Product" style="height: 50px; text-align: left; vertical-align: top;" align="left"> 
                                            <c:if test="${model.listing.available}">
                                                <h1 itemprop="name" style="font-size:16px; font-weight: bold; position: relative; top:-5px;">${model.listing.displayTitle}</h1>
                                            </c:if>
                                            <c:if test="${!model.listing.available}">
                                                <h1 itemprop="name" style="font-size:16px; font-weight: bold; position: relative; top:-5px;"><strike>${model.listing.displayTitle}</strike> &nbsp;<span style="color: tomato">(rented out)</span></span>
                                            </c:if>
                                            <div style="margin-top: 7px;">
                                                <span style="font-size:15px; font-weight: normal; margin-top:10px; position: relative; top:-5px;">${model.listing.address}</span> 
                                            </div>
                                        </td>
                                        <td style="width:50px; text-align: center; vertical-align: top;">

                                        </td>
                                        <c:if test="${model.leaseTermType == 1}">
                                            <td style="width:120px; text-align: center; vertical-align: top;">
                                                <b>Sq. Area: </b>
                                                <br>
                                                <div style="margin-top: 7px;">
                                                    <c:if test="${model.listing.sqArea == '0.0'}">
                                                        <span style="font-size:16px; font-weight: normal;">N/A</span>                                            
                                                    </c:if>  
                                                    <c:if test="${model.listing.sqArea != '0.0'}">
                                                        <span style="font-size:16px; font-weight: normal;">${model.listing.sqArea}</span> sqm.                                            
                                                    </c:if>                            
                                                </div>
                                            </td>
                                            <td style="width:130px; text-align: center; vertical-align: top;">
                                                <b>Month Rate:</b>
                                                <div style="margin-top: 7px;">                                        
                                                    <meta itemprop="priceCurrency" content="PHP" />
                                                    <span itemprop="price" style="font-size:16px; font-weight: normal;">&#8369; ${model.listing.longMonthRate}</span>                                
                                                </div>
                                            </td>
                                        </c:if>
                                        <c:if test="${model.leaseTermType == 2}">
                                            <td style="width:120px; text-align: center; vertical-align: top;">
                                                <b>Sq. Area: </b>
                                                <br>
                                                <div style="margin-top: 7px;">
                                                    <c:if test="${model.listing.sqArea == '0.0'}">
                                                        <span style="font-size:16px; font-weight: normal;">N/A</span>                                           
                                                    </c:if>  
                                                    <c:if test="${model.listing.sqArea != '0.0'}">
                                                        <span style="font-size:16px; font-weight: normal;">${model.listing.sqArea}</span> sqm.                                             
                                                    </c:if>                                                                     
                                                </div>
                                            </td>
                                            <td style="width:130px; text-align: center; vertical-align: top;">
                                                <b>Daily Rate:</b>
                                                <div style="margin-top: 7px;">                
                                                    <meta itemprop="priceCurrency" content="PHP" />
                                                    <span itemprop="price" style="font-size:16px; font-weight: normal;">&#8369; ${model.listing.shortDayRate}</span>                                
                                                </div>
                                            </td>
                                        </c:if>
                                    </tr>
                                </table>

                                <table border="0" style="width: 1000px; height: 600px; margin-top: 10px; border-collapse: collapse;">
                                    <tr>
                                        <td style="vertical-align: top;">
                                            <table style="border-collapse: collapse;">
                                                <tr>
                                                    <td>
                                                        <div style="background-color: #4d4d4d; height: 40px;">
                                                            &nbsp;&nbsp;
                                                            <input type="button" value="Photos" style="margin-top: 7px; width: 80px;" onclick="toggleContentPhotoView()"/>
                                                            &nbsp;
                                                            <input type="button" value="Map" style="margin-top: 7px; width: 80px;" onclick="toggleContentMapView('2')"/>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        
                                                        <c:choose>                                                            
                                                            <c:when test="${fn:length(model.listing.photos) > 0}">                                                            
                                                                <div id="content-photo" style="margin-top: -2px;">
                                                            </c:when>
                                                            <c:otherwise>
                                                                <div id="content-photo" style="margin-top: -2px; display: none"\>
                                                            </c:otherwise>
                                                        </c:choose>
                                                        
                                                            <div id="gallery" class="galleria" style="margin-top: -5px;">                                                            
                                                                <c:forEach items="${model.listing.photos}" var="photo">
                                                                    <img src="${model.props.rootPath}/uploads/img/001-${photo.filename}" alt="${model.listing.propertyType.title}">
                                                                </c:forEach>
                                                            </div>
                                                        </div>
                                                        
                                                        <script type="text/javascript">
                                                        $('#gallery').galleria({
                                                            width: 757,
                                                            height: 380,
                                                            debug: false
                                                        });
                                                        </script>
                                                        
                                                        <!--
                                                        <div id="content-photo" style="margin-top: -2px;">
                                                            <input id="photos-size" type="hidden" value="${fn:length(model.listing.photos)}" />

                                                            <img itemprop="image" src="${model.props.rootPath}/uploads/img/002-${model.listing.primaryPhoto.filename}" style="display:none;" alt="${model.listing.propertyType.title}"/> 

                                                            <ul id="myGallery">
                                                                <c:forEach items="${model.listing.photos}" var="photo">
                                                                    <li><img src="${model.props.rootPath}/uploads/img/001-${photo.filename}" alt="${model.listing.propertyType.title}" />                                                    
                                                                </c:forEach>
                                                            </ul> 
                                                        </div>
                                                        -->    
                                                            
                                                        <c:choose>                                                            
                                                            <c:when test="${fn:length(model.listing.photos) <= 0}">                                                            
                                                                <div id="content-map" style="display: block; margin-top: -2px;">
                                                            </c:when>
                                                            <c:otherwise>
                                                                <div id="content-map" style="display: none; margin-top: -2px;">
                                                            </c:otherwise>
                                                        </c:choose>
                                                            <div id="map_canvas" style="width:757px; height:380px;"></div>                                
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>

                                            <table border="0" style="width: 758px; margin-top: -5px; margin-left: 2px; font-family: avant, tahoma;">
                                                <tr>
                                                    <td style=" max-width: 390px; vertical-align: top; font-size: 13px; text-overflow: clip; word-wrap: break-word;" >
                                                        <br>

                                                        <div>        

                                                            <c:if test="${model.leaseTermType == 0}">
                                                                <a href="mailto:?subject=Check out this ${model.listing.propertyType.title} for rent at ${model.listing.structure}&body=I thought you might find it interesting: ${model.listing.title} --------- Here's the link: ${model.props.appPath}/for-rent/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}"><img src="${model.props.appPath}/img/social-icons-34.png" alt="Email to a Friend" width="37px" height="37px" target="blank"/></a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('${model.props.appPath}/for-rent/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}'), 
                                                                    'facebook-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-30.png" alt="Share on Facebook" width="37px" height="37px"/>
                                                                </a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'http://twitter.com/intent/tweet?text=${model.listing.title}%20-----%20&url=${model.props.appPath}/for-rent/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-29.png" alt="Share on Twitter" width="37px" height="37px"/>
                                                                </a>                                                    
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'https://plus.google.com/share?url=${model.props.appPath}/for-rent/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-33.png" alt="Share on Google Plus" width="37px" height="37px"/>
                                                                </a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'http://pinterest.com/pin/create/button/?url=${model.props.appPath}/for-rent/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}&media=${model.props.rootPath}/uploads/img/002-${model.listing.primaryPhoto.filename}&description=${model.listing.title}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-32.png" alt="Share on Pinterest" width="37px" height="37px"/>
                                                                </a>
                                                            </c:if>     

                                                            <c:if test="${model.leaseTermType == 1}">
                                                                <a href="mailto:?subject=Check out this ${model.listing.propertyType.title} for rent at ${model.listing.structure}&body=I thought you might find it interesting: ${model.listing.title} --------- Here's the link: ${model.props.appPath}/long-term-rentals/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}"><img src="${model.props.appPath}/img/social-icons-34.png" alt="Email to a Friend" width="37px" height="37px" target="blank"/></a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('${model.props.appPath}/long-term-rentals/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}'), 
                                                                    'facebook-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-30.png" alt="Share on Facebook" width="37px" height="37px"/>
                                                                </a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'http://twitter.com/intent/tweet?text=${model.listing.title}%20-----%20&url=${model.props.appPath}/long-term-rentals/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-29.png" alt="Share on Twitter" width="37px" height="37px"/>
                                                                </a>                                                    
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'https://plus.google.com/share?url=${model.props.appPath}/long-term-rentals/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-33.png" alt="Share on Google Plus" width="37px" height="37px"/>
                                                                </a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'http://pinterest.com/pin/create/button/?url=${model.props.appPath}/long-term-rentals/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}&media=${model.props.rootPath}/uploads/img/002-${model.listing.primaryPhoto.filename}&description=${model.listing.title}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-32.png" alt="Share on Pinterest" width="37px" height="37px"/>
                                                                </a>
                                                            </c:if>          

                                                            <c:if test="${model.leaseTermType == 2}">
                                                                <a href="mailto:?subject=Check out this ${model.listing.propertyType.title} for rent at ${model.listing.structure}&body=I thought you might find it interesting: ${model.listing.title} --------- Here's the link: ${model.props.appPath}/short-term-rentals/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}"><img src="${model.props.appPath}/img/social-icons-34.png" alt="Email to a Friend" width="37px" height="37px" target="blank"/></a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('${model.props.appPath}/short-term-rentals/${fn:toLowerCase(model.listing.city)}/${model.listing.urlTitle}/${model.listing.id}'), 
                                                                    'facebook-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-30.png" alt="Share on Facebook" width="37px" height="37px"/>
                                                                </a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'http://twitter.com/intent/tweet?text=${model.listing.title}%20-----%20&url=${model.props.appPath}/short-term-rentals/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-29.png" alt="Share on Twitter" width="37px" height="37px"/>
                                                                </a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'https://plus.google.com/share?url=${model.props.appPath}/short-term-rentals/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-33.png" alt="Share on Google Plus" width="37px" height="37px"/>
                                                                </a>
                                                                <a href="#" 
                                                                    onclick="
                                                                    window.open(
                                                                    'http://pinterest.com/pin/create/button/?url=${model.props.appPath}/short-term-rentals/${fn:toLowerCase(fn:trim(model.listing.city))}/${model.listing.urlTitle}/${model.listing.id}&media=${model.props.rootPath}/uploads/img/002-${model.listing.primaryPhoto.filename}&description=${model.listing.title}', 
                                                                    'twitter-share-dialog', 
                                                                    'width=626,height=436'); 
                                                                    return false;">
                                                                    <img src="${model.props.appPath}/img/social-icons-32.png" alt="Share on Pinterest" width="37px" height="37px"/>
                                                                </a>
                                                            </c:if>  


                                                        </div>

                                                        <br>
                                                        
                                                        <c:if test="${fn:length(model.listing.displayDescription) > 0}">                                                            
                                                            <b>Property Description:</b>
                                                            <br><br>
                                                            ${model.listing.displayDescription} 
                                                        </c:if>
                                                            
                                                        <br><br><br>
                                                        
                                                        <c:if test="${fn:length(model.listing.amenities) > 0}">
                                                            <b>Amenities:</b>
                                                            <br>
                                                            <table border="0" cellpadding="1" cellspacing="1" style="margin-top: 5px; margin-left: 10px;">
                                                                <c:forEach items="${model.listing.amenities}" var="amenity">
                                                                    <tr>
                                                                        <td style="vertical-align: middle; padding-top: 5px;"><img src="${model.props.appPath}/img/check-green.jpg" alt="Amenity"/></td>
                                                                        <td style="padding-left:2px;">${amenity.title}</td>
                                                                    </tr>
                                                                </c:forEach>                                            
                                                            </table>                                                            
                                                        </c:if>
                                                                                                                    
                                                        <br><br><br>
                                                    </td>

                                                    <td>&nbsp;</td>

                                                    <td style="width: 338px; background-color: #ededed; border-collapse: collapse; vertical-align: top;">

                                                        <br>

                                                        <table id="table-listing-details" border="0" style="width: 348px; font-size: 12px; border-collapse: collapse;  font-family: avant, sans-serif; margin-top: 5px;">
                                                           
                                                            <c:if test="${model.listing.longMonthRate != '0' && model.listing.longMonthRate != '0.0'}">
                                                                <tr>
                                                                    <td style="width: 95px; height: 35px;">
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <b>Long Term:</b>
                                                                    </td>
                                                                    <td>&#8369; ${model.listing.longMonthRate} /Month</td>
                                                                </tr>
                                                            </c:if>
                                                                
                                                            <c:if test="${model.listing.shortDayRate != '0' && model.listing.shortDayRate != '0.0'}">
                                                                <tr>
                                                                    <td style="height: 35px;">                      
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <b>Short Term:</b>
                                                                    </td>
                                                                    <td>
                                                                        <p>&#8369; ${model.listing.shortDayRate} /Day</p>                                                        
                                                                    </td>
                                                                </tr>
                                                            </c:if>

                                                            <c:if test="${model.listing.shortWeekRate != '0' && model.listing.shortWeekRate != '0.0'}">
                                                                <tr>
                                                                    <td>
                                                                        &nbsp;&nbsp;&nbsp;
                                                                    </td>
                                                                    <td><p>&#8369; ${model.listing.shortWeekRate} /Week</p></td>
                                                                </tr>
                                                            </c:if>

                                                            <c:if test="${model.listing.shortMonthRate != '0' && model.listing.shortMonthRate != '0.0'}">
                                                                <tr>
                                                                    <td>
                                                                        &nbsp;&nbsp;&nbsp;
                                                                    </td>
                                                                    <td><p>&#8369; ${model.listing.shortMonthRate} /Month</p></td>                                                    
                                                                </tr>
                                                            </c:if>

                                                            <tr>
                                                                <td style="height: 35px;">
                                                                </td>
                                                                <td></td>
                                                            </tr>

                                                            <c:if test="${not empty model.listing.shortAddress}">
                                                                <tr>
                                                                    <td style="height: 35px;">
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <b>City:</b>
                                                                    </td>
                                                                    <td itemscope itemtype="http://schema.org/Place" itemprop="availableAtOrFrom">       

                                                                            <a itemprop="name" href="${model.props.appPath}/places/${fn:replace(fn:toLowerCase(model.listing.city_place.title), ' ', '-')}/${model.listing.city_place.id}" style="color:#369; position: relative; top: 5px;">${model.listing.city_place.title}</a>

                                                                            <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" style="position: relative; top:-8px; font-size: 12px;">
                                                                                <p>
                                                                                    <c:if test="${not empty model.listing.city_place.street}"><meta itemprop="streetAddress" content="${model.listing.city_place.street}"></meta></c:if>
                                                                                    <c:if test="${not empty model.listing.city_place.displayCity}"><meta itemprop="streetAddress" content="${model.listing.city_place.displayCity}"></meta></c:if>
                                                                                    <c:if test="${not empty model.listing.city_place.region}"><meta itemprop="streetAddress" content="${model.listing.city_place.region}"></meta></c:if>
                                                                                    <c:if test="${not empty model.listing.city_place.country}"><meta itemprop="streetAddress" content="${model.listing.city_place.country}"></meta></c:if>
                                                                                </p>                                                    
                                                                            </span>

                                                                            <span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
                                                                                <meta itemprop="latitude" content="${model.listing.city_place.lat}" />
                                                                                <meta itemprop="longitude" content="${model.listing.city_place.lng}" />
                                                                            </span>

                                                                            <c:if test="${not empty model.listing.city_place.wikiURL}">
                                                                                <meta itemprop="sameAs" content="${model.listing.city_place.wikiURL}"/>  
                                                                            </c:if>

                                                                            <meta itemprop="url" content="${model.props.appPath}/places/${fn:replace(fn:toLowerCase(model.listing.city_place.title), ' ', '-')}/${model.listing.city_place.id}"/> 

                                                                    </td>
                                                                </tr>   
                                                            </c:if>

                                                            <c:if test="${not empty model.listing.structure}">
                                                                <tr>
                                                                    <td style="height: 35px;">
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <b>Location:</b>
                                                                    </td>
                                                                    <td>

                                                                        <c:if test="${model.listing.community != null}">
                                                                            <a href="${model.props.appPath}/places/${fn:replace(fn:toLowerCase(model.listing.community.title), ' ', '-')}/${model.listing.community.id}" style="color:#369;" titile="${model.listing.community.title}">${model.listing.community.title} &nbsp; <span style="color: #568C32">(see reviews)</span></a>
                                                                        </c:if>
                                                                        <c:if test="${model.listing.community == null}">
                                                                            ${model.listing.structure}
                                                                        </c:if>
                                                                    </td>
                                                                </tr>  
                                                            </c:if>

                                                            <c:if test="${not empty model.listing.floor}">
                                                                <tr>
                                                                    <td style="height: 35px;">
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <b>Floor:</b>
                                                                    </td>
                                                                    <td>${model.listing.floor}</td>
                                                                </tr>   
                                                            </c:if>

                                                            <c:if test="${model.listing.sqArea != '0.0'}">
                                                            <tr>
                                                                <td style="height: 35px;">
                                                                    &nbsp;&nbsp;&nbsp;
                                                                    <b>Square Area:</b>
                                                                </td>
                                                                <td>${model.listing.sqArea} sqm.</td>
                                                            </tr>
                                                            </c:if>

                                                            <tr>
                                                                <td style="height: 35px;">
                                                                    &nbsp;&nbsp;&nbsp;
                                                                    <b>Bedrooms:</b>
                                                                </td>
                                                                <td>${model.listing.numBedrooms}</td>
                                                            </tr>

                                                            <tr>
                                                                <td style="height: 35px;">
                                                                    &nbsp;&nbsp;&nbsp;
                                                                    <b>Bathrooms:</b>
                                                                </td>
                                                                <td>${model.listing.numBathrooms}</td>
                                                            </tr>    

                                                            <c:if test="${not empty model.listing.furnishType.title}">
                                                                <tr>
                                                                    <td style="height: 35px;">
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <b>Furnishing:</b>
                                                                    </td>
                                                                    <td>${model.listing.furnishType.title}</td>
                                                                </tr> 
                                                            </c:if>

                                                            <c:if test="${not empty model.listing.dateModified}">
                                                                <tr>
                                                                    <td style="height: 35px;">
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <b>Updated:</b>
                                                                    </td>
                                                                    <td><fmt:formatDate value="${model.listing.dateModified}" pattern="MMMM dd, yyyy" /></td>
                                                                </tr>
                                                            </c:if>

                                                        </table>    

                                                        <br><br> 



                                            <a href="http://donate.unicef.ph/campaign/24/typhoon-yolanda" target="blank">
                                                <div style="background-image: url('${model.props.appPath}/img/splash/unicef-yolanda-1.jpg'); width: 300px; height: 250px; margin-left: 25px; margin-bottom: 10px">

                                                </div>
                                            </a> 



                                                    </td>
                                                </tr>

                                                <c:if test="${fn:length(model.listings) > 0}">
                                                    <tr>
                                                        <td colspan="3">    

                                                            <br><br><br>
                                                            <h3 style="font-size:19px; font-weight: bold;">&nbsp;&nbsp;&#x25BC;&nbsp;Similar properties nearby</h3>
                                                            <hr style="color:#ededed;">

                                                            <div id="view-list" >                         
                                                                <div id="view-list-outer" class="view-list-outer">    

                                                                    <c:forEach items="${model.listings}" var="listing">  
                                                                        <div class="listing-holder" style="background-color:#ededed; width: 97%; margin-top: 10px; margin-left:10px;">
                                                                            <table border="0" cellpadding="3" style="width:100%; font-family: avant, Century Gothic, Calibri;">
                                                                                <tr>
                                                                                    <td style="width: 10%">
                                                                                        <c:choose>
                                                                                            <c:when test="${model.leaseTermType == 1}">
                                                                                                <a href="${model.props.appPath}/long-term-rentals/${fn:toLowerCase(listing.city)}/${fn:replace(listing.displayTitle, ' ', '-')}/${listing.id}">
                                                                                            </c:when>
                                                                                            <c:otherwise>
                                                                                                <a href="${model.props.appPath}/short-term-rentals/${fn:toLowerCase(listing.city)}/${fn:replace(listing.displayTitle, ' ', '-')}/${listing.id}">
                                                                                            </c:otherwise>
                                                                                        </c:choose>   

                                                                                            <div class="listing-holder" style="height:70px; width:150px; background: url('${model.props.rootPath}/uploads/img/002-${listing.primaryPhoto.filename}'); background-size:cover;">

                                                                                            </div>
                                                                                        </a>  
                                                                                    </td>

                                                                                    <td style="vertical-align: top;">
                                                                                        <table border="0" style="width: 98%; padding-left:10px;  margin-left: 0px; font-family: avant, Century Gothic, Calibri; border-collapse: collapse;">
                                                                                            <tr>
                                                                                                <td style="vertical-align: top;  width: 550px;">
                                                                                                    <div style="padding-top:5px; padding-bottom:0px;">                                                                    
                                                                                                        <span itemprop="name" style="font-size: 13px; padding-bottom: 10px">
                                                                                                            <c:if test="${listing.available}">
                                                                                                                ${listing.title}
                                                                                                            </c:if>
                                                                                                            <c:if test="${!listing.available}">
                                                                                                                <strike title=" Unit is rented out. ">${listing.title}</strike>
                                                                                                            </c:if>                                       
                                                                                                        </span>
                                                                                                    </div>
                                                                                                    <div style="padding-top:8px; padding-bottom:0px;">
                                                                                                        <span style="font-size: 12px; font-weight: normal;">${listing.community.title}, ${listing.city}</span>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td style="vertical-align: top; width: 140px;" align="left">                       
                                                                                                    <br>              
                                                                                                    <div style="padding-left: 5px;">
                                                                                                        <c:choose>
                                                                                                            <c:when test="${model.leaseTermType == 1}">
                                                                                                                <span style="font-size: 15px;">&#8369; ${listing.longMonthRate}</span>
                                                                                                                <span style="font-size: 12px;"> /Mo.</span>
                                                                                                            </c:when>
                                                                                                            <c:otherwise>
                                                                                                                <meta itemprop="priceCurrency" content="PHP" />
                                                                                                                <span itemprop="price" style="font-size: 15px;">&#8369; ${listing.shortDayRate}</span>
                                                                                                                <span style="font-size: 12px;"> /Mo.</span>
                                                                                                            </c:otherwise>
                                                                                                        </c:choose>    
                                                                                                    </div>

                                                                                                </td>
                                                                                            </tr>
                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                            </table>
                                                                        </div>
                                                                    </c:forEach>

                                                                </div>
                                                                <br><br>
                                                            </div>

                                                        </td>
                                                    </tr>                                        
                                                </c:if>

                                            </table>
                                        </td>

                                        <td style="width: 239px; vertical-align: top;">
                                            <div style="min-height: 350px; background-color: #c6e369; margin-left: -3px; text-align: center;">
                                                
                                                <c:if test="${model.listing.roomoramaListing}">
                                                    <span style="font-size: 24px; font-weight: bold; color: #FAFAFA">
                                                        <strike>Send Inquiry</strike>
                                                    </span>
                                                    <br><br>
                                                    <input class="ghost" id="text-tour-name" type="text" style="padding: 8px; width: 200px;" value="" title="Name" disabled="disabled"/>
                                                    <br><br>
                                                    <input class="ghost" id="text-tour-email" type="text" style="padding: 8px; width: 200px;" value="" title="Email" disabled="disabled"/>
                                                    <br><br>
                                                    <input class="ghost" id="text-tour-phone" type="text" style="padding: 8px; width: 200px;" value="" title="Phone" disabled="disabled"/>
                                                    <br><br>
                                                    <input type="button" value="Submit" style="padding: 8px; width: 200px;" onclick="submitTourForm()" disabled="disabled"/>
                                                </c:if>
                                                <c:if test="${!model.listing.roomoramaListing}">
                                                    <div style="font-size: 24px; font-weight: bold; color: #FAFAFA; padding-top: 10px;">
                                                        Send Inquiry&nbsp;&nbsp;
                                                    </div>
                                                    <br>
                                                    <input class="ghost" id="text-tour-name" type="text" style="padding: 8px; width: 200px; font-family: avant; font-size: 12px" value="" title="Name"/>
                                                    <br><br>
                                                    <input class="ghost" id="text-tour-email" type="text" style="padding: 8px; width: 200px; font-family: avant; font-size: 12px" value="" title="Email"/>
                                                    <br><br>
                                                    <input class="ghost" id="text-tour-phone" type="text" style="padding: 8px; width: 200px;font-family: avant; font-size: 12px" value="" title="Phone"/>
                                                    <br><br>                                                    
                                                    <textarea class="ghost" id="text-tour-message" style="padding: 8px; width: 200px; height: 55px; font-family: avant; font-size: 12px" value="Your messsage" title="Your messsage"></textarea>
                                                    <br>
                                                    <div id="dialog" title="&nbsp;">
                                                        <table cellspacing="5" cellpadding="5">
                                                            <tr>
                                                                <td><span style="font-size: 16px;">Are you human? Sorry &nbsp;<b>&#12484;</b></span></td>
                                                            </tr>                                                
                                                            <tr>
                                                                <td>
                                                                    <%
                                                                        ReCaptcha c = ReCaptchaFactory.newReCaptcha("6LcJpegSAAAAAOa1UdcZkOxSbYRPAKeN9wHZdq3h", "6LcJpegSAAAAAJzGZN-OWFnq48drxH-vmu0zYHkE", false);
                                                                        out.print(c.createRecaptchaHtml(null, null));
                                                                    %>
                                                                </td>
                                                            </tr>                                            
                                                            <tr>
                                                                <td>
                                                                    <input id="submit-recaptcha" type="button" style="padding: 8px; width: 200px; font-weight: normal; font-size: 13px;" value=" Submit Inquiry " onclick="submitTourForm()" />
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                    <br>
                                                    <input id="opener" type="button" value=" Submit Inquiry" style="padding: 8px; width: 200px;"/>
                                                    <br><br>

                                                </c:if>
                                            </div>
                                            <div style="height: 35px; background-color: #e6e6e2; margin-left: -3px;">
                                                <div style="padding-top: 7px; text-align: center; font-family: avant, tahoma;">                                                   
                                                    <c:if test="${model.listing.roomoramaListing}">
                                                        Booking Details
                                                    </c:if>
                                                    <c:if test="${!model.listing.roomoramaListing}">
                                                        Contact Details  
                                                    </c:if>
                                                </div>
                                            </div>
                                            <div style="width: 239px; text-align: left; margin-left: 20px; font-family: avant, tahoma;">
                                                <br>
                                                <c:if test="${model.listing.roomoramaListing}">
                                                    <input type="button" value=" Book Now via Roomorama " style="padding:8px; background: firebrick; font-weight: bold; color: #fafafa;" onclick="window.location='https://www.roomorama.com/short-term-rentals/${model.listing.roomorama_id}?ref=chux18'">                                                   
                                                </c:if>

                                                <c:if test="${!model.listing.roomoramaListing}">
                                                    <div id="contact-name" style="font-size: 18px;">                                   
                                                    </div>                    
                                                    <div id="contact-email" style="margin-top: 5px; font-size: 14px;">
                                                    </div>
                                                    <div id="contact-mobile" style="margin-top: 5px; font-size: 14px;">  
                                                    </div>
                                                    <div id="contact-landline" style="margin-top: 5px; font-size: 14px;">
                                                    </div>
                                                </c:if>
                                            </div>
                                            <br><br>  

                                        </td>
                                    </tr>
                                </table>

                            </div>

                        </div>
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <%@include file="footer.jsp" %>                        
                    </td>
                </tr>
                
            </table>


            
                                    
            
            
            <div id="dialog-email" title=" &nbsp; ">
                <table cellspacing="5" cellpadding="7" style="font-size: 15px;">
                    <tr>
                        <td align="left" style="vertical-align: top; font-size: 16px;">
                            Awesome! Your inquiry was sent to the listing owner. <b>&#12484;</b>
                            
                            <div style="margin-top: 5px; margin-bottom: 10px;">Also, you may like us on Facebook to get the latest in <b>${model.listing.city}</b> &nbsp; </div>
                        
                        </td>
                           
                        <!--
                        <td align="left" style="vertical-align: top;">We'd like to help in your home search by emailing you when new properties are posted in <b>${model.listing.city}</b>.<br><br>If you want to be notified, just fill the form below.</span><br></td>
                        -->
                    </tr>                                             
                    <tr>
                        <td>
                            <div id="fb-root"></div>
                            <script>(function(d, s, id) {
                              var js, fjs = d.getElementsByTagName(s)[0];
                              if (d.getElementById(id)) return;
                              js = d.createElement(s); js.id = id;
                              js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk'));</script>
                            <div class="fb-like-box" style="background-color: white;" data-href="http://www.facebook.com/rentpad" data-width="520" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
                            
                            <!--
                            <table cellspacing="3" cellpadding="3">
                                <tr>
                                    <td align="left">First Name:</td>
                                    <td><input id="text-lead-name" type="text" style="font-size:12px;  padding:6px; width:400px;"/></td>
                                </tr>
                                <tr>
                                    <td align="left">Email:</td>
                                    <td><input id="text-lead-email" type="text" style="font-size:12px;  padding:6px; width:400px;"/></td>
                                </tr>
                                <tr>
                                    <td align="left">Type:</td>
                                    <td>
                                        <select id="text-lead-type" style="font-size:12px; padding:6px; width:410px;">
                                            <option>-- select a type of property --</option>
                                            <option>Condo / Apartment</option>
                                            <option>House</option>
                                            <option>Room</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left">Range:</td>
                                    <td>
                                        <select id="text-lead-range" style="font-size:12px; padding:6px; width:410px;">
                                            <option>-- choose a price range --</option>
                                            <option>10,000 and below</option>
                                            <option>10,000 to 20,000</option>
                                            <option>30,000 to 40,000</option>
                                            <option>40,000 to 60,000</option>
                                            <option>60,000 to 80,000</option>
                                            <option>80,000 to 100,000</option>
                                            <option>100,000 and above</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left">Beds-</td>
                                    <td>
                                        <select id="text-lead-beds" style="font-size:12px; padding:6px; width:410px;">
                                            <option>-- choose number of beds --</option>
                                            <option>studio</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5 and above</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <br>
                                        <input id="text-lead-city" type="hidden" value="${model.listing.city}"/>
                                        <input type="button" style="font-size:16px; padding:6px; width:410px;"  value=" Yes, email me new postings " onclick="submitEmailDialogForm()"/>
                                        <br>
                                    </td>
                                </tr>
                            </table>
                            -->
                        </td>
                    </tr>     
                </table>
            </div>
                                                    
        </div>
                    
        
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
        
    </body>
    
    
</html>
